<template>
  <div class="sso-container" :style="{backgroundImage: 'url(' + bgImgUrl + ')'}">
    <div class="message-box">
      <el-result
        v-if="message"
        icon="error"
        title="错误提示"
      >
        <template #sub-title>
          <div style="color: red;font-weight: 600;">{{message}}</div>
        </template>
      </el-result>
      <el-result
        v-else
        icon="primary"
        title="提示"
      >
        <template #sub-title>
          <div style="font-weight: 600;">正在登录中...</div>
        </template>
      </el-result>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import loading from "@/utils/loading";
import { getSetting } from '@/utils/system';
import { useUserStore } from '@/pinia/modules/user';
import api from "@/http/api";
import * as dd from 'dingtalk-jsapi';

const imageUrl = ref(import.meta.env.VITE_IMAGE_PATH);
import defaultBgImg from "@/assets/images/login-bg.jpg";
import { ElMessage } from "element-plus";
import tool from "@/utils/tool";
const bgImgUrl = ref('');
const message = ref();
const userStore = useUserStore();

const doLogin = () => {
  loading.showLoading("正在登录中，请稍候...");
  const hashParams = new URLSearchParams(window.location.hash);
  const searchParams = new URLSearchParams(window.location.search);

  if (searchParams.get('ssoThirdType') === 'dd') {
    loginByDD(searchParams);
  } else {
    loginByParams(hashParams, searchParams);
  }
};

const loginByDD = (searchParams) => {
  dd.requestAuthCode({
    corpId: searchParams.get('corpId'),
    clientId: searchParams.get('clientId'),
    onSuccess: function (res) {
      api.post('/ssoLogin', {code: res.code}).then(result => {
        if (result.code === "1") {
          userStore.setUser(result.data);
          window.location.href = tool.getBaseUrl() + '/choose.html';
        } else {
          ElMessage.error(result.message);
        }
        loading.hideLoading();
      }).catch(e => {
        message.value = e.message;
        loading.hideLoading();
      });
    },
    onFail: function (e) {
      console.log(e);
      loading.hideLoading();
    },
  });
};

const loginByParams = (hashParams, searchParams) => {
  const params = {};
  if (hashParams) {
    for (const [key, value] of hashParams.entries()) {
      params[key] = value;
    }
  }
  if (searchParams) {
    for (const [key, value] of searchParams.entries()) {
      params[key] = value;
    }
  }

  api.post('/ssoLogin', params).then(() => {
    window.location.href = tool.getBaseUrl() + '/choose.html';
    loading.hideLoading();
  }).catch(e => {
    message.value = e.message;
    loading.hideLoading();
  });
};

const loadSetting = () => {
  getSetting().then(setting => {
    if (setting) {
      bgImgUrl.value = !setting.loginBgImageId ? defaultBgImg : imageUrl.value + setting.loginBgImageId;
      document.title = (setting.webTitle || '系统登录').split("<br/>")[0];
    }
  });
};

onMounted(() => {
  doLogin();
  loadSetting();
});
</script>

<style lang="scss">
#app {
  background: #eee;
  height: 100vh;
  overflow: hidden;
}
.sso-container {
  background-size: cover;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.message-box {
  font-size: 18px;
  background: white;
  width: 400px;
  border-radius: 30px;
}
</style>